<template>
  <div>
    <h1>App</h1>
    <h1>年龄 {{ age }}</h1>
    <h1>姓名 {{ obj.name }}</h1>
    <h1> 原本小写的 {{ msg }}</h1>
    <h1>转成大写{{ msg.toUpperCase() }}</h1>
    <h1>{{ age >= 18 ? '成年' : '未成年' }}</h1>
    <!-- 数据data里必须存在 
      不存在会报错？怎么解决？
      看报错信息，在data中提供数据
    -->
    <h1>{{ sf }}</h1>
    <!-- 
      语法上 双大括号里面不能写if和for （会有指令的解决方案）
      框架 是有一定的规范和规定 所以没有原因为什么不能用，就是不能用
     -->
    <!-- <h1>{{if (age >= 18) {return '成年'} else { return '未成年' } }}</h1> -->
    <h1 class="zs">我是h1</h1>
    <!-- 不能再标签属性里使用双大括号 后面也会用指令去解决
      为什么不可以，因为没有为什么 因为用的是框架，就是规定
     -->
    <!-- <h1 class="{{obj.name}}">我是h1</h1> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 12,
      obj: {
        name: 'zs'
      },
      msg: 'abc',
      sf: true
    }
  }
}
</script>

<style>
.zs {
  color: red;
}
</style>
